<template>
  <div class="app-container hospital-bad-list" style="background-color: #f8f8f8;" @click="closeRightMenu">
    <div class="search-container">
      <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
        <el-row>
          <el-col>
            <el-form-item class="search-container-redio" label="是否出院" prop="inFlag">
              <el-radio-group v-model="queryParams.inFlag" border @change="handleQuery">
                <el-radio-button value="">全部</el-radio-button>
                <el-radio-button value="1">在院</el-radio-button>
                <el-radio-button value="2">已出院</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="类别">
              <el-radio-group v-model="queryParams.isMyPatient" class="mb5"
                              @change="handleQuery">
                <!-- <el-col :span="12"> -->
                <el-radio key="0" :border="true" class="clinic-type-radio" style="margin-right: 5px"
                          value="0">我的患者
                </el-radio>
                <!-- </el-col>
                <el-col :span="12"> -->
                <el-radio key="1" :border="true" class="clinic-type-radio"
                          value="1">全科患者
                </el-radio>
                <!-- </el-col> -->
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="出院时间段" prop="admissionTime">
              <el-date-picker v-model="dateRange" :unlink-panels="true" end-placeholder="结束日期(23点)"
                              range-separator="-" start-placeholder="开始日期(0点)" type="daterange"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              style="width: 200px"
                              @change="admissionTimeChange"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="姓名/住院号" prop="name">
              <el-input v-model="queryParams.name" clearable placeholder="请输入姓名/住院号"
                        @keyup.enter="handleQuery"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col> -->
          <el-form-item label=" ">
            <el-button class="search-container-primary" type="primary" @click="handleQuery">
              <template #icon>
                <i-ep-search/>
              </template>
              查询
            </el-button>
          </el-form-item>
          <!-- </el-col> -->
        </el-row>

      </el-form>
      <el-button class="search-container-add" plain type="primary" @click="moveIntoDept">
        <template #icon>
          <i-ep-plus/>
        </template>
        新入院患者
      </el-button>
    </div>
    <div class="list-container">
      <el-row>
        <!--            <div style="display: ruby;">-->
        <right-menu v-model="menuSetting" :data="rightMenuList" :model-value-info="modelValueInfo" theme="light"
                    @update-modelValue="updateModelValue"/>
        <el-space style="margin-bottom: 50px" wrap>
          <template v-for="(item, index) in patientList">
            <el-card :id="'patientCard-' + index" class="bed-card mr10" shadow="hover"
                     @dblclick="cardDblClick(item, index)"
                     @click.stop="cardClick(item, index)"
                     @contextmenu.prevent.native="openMenu($event, item, index)">
              <template #header>
                <div class="card-header">
                  <div style="display: flex;">
                    <div v-if="item.visitId" class="card-div div-conter mr5" style="flex: 0.8">
                      <span class="card-header-name">{{
                          item.name
                        }}</span>
                      <span class="card-header-sex">
                        {{
                          dictStore.getMateDictInfo(
                            dictDataMap['sys_user_sex'], item.sex).dictValue === '1'
                            ? '男'
                            : '女'
                        }}
                      </span>
                      <span class="card-header-sex">
                        {{ item.ageAll }}
                      </span>
                    </div>
                    <div v-else class="card-div div-conter mr5" style="padding-right: 12px;flex: 0.8">
                      暂无患者
                    </div>
                    <div class="div-conter mr5" style="flex: 0.1; margin-top: -9px;">
                      <el-button @click.stop="openMenu($event, item, index)">
                        <template #icon>
                          <i-ep-expand/>
                        </template>
                      </el-button>
                    </div>
                    <div v-if="item.visitId" class="div-conter mr5 bed-card-show"
                         :style="{
                      flex: '0.2',
                      backgroundColor: item.situationType === '1' ? '#FF634E' : item.situationType === '2' ? '#FF882D' : '#4E64F6'
                      }"
                    >{{
                        item.bedNo
                      }}
                    </div>
                    <div v-else class="div-conter mr5 bed-card-show"
                         style="flex: 0.2;background-color:#939393">
                      {{ item.bedNo }}
                    </div>
                  </div>
                </div>
              </template>
              <div class="center-div mb5"><span>住&nbsp;&nbsp;院&nbsp;&nbsp;号</span>：
                <span class="ys-css" style="color: #98999B;">{{ item.hospitalNo }}</span>
              </div>
              <div class="center-div mb5"><span>病&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;情</span>：
                <el-select v-model="item.situationType" :class="'situationType-class' + index"
                           :disabled="!item.visitId" placeholder="请选择"
                           :style="{
                            width: '50%',
                            borderRadius: '5px',
                            border: item.situationType === '1' ? '1px solid #FF634E' : item.situationType === '2' ? '1px solid #FF882D' : '1px solid #4E64F6'
                          }"
                           @change="situationTypeChange($event, index, item)"
                           @click="modelValueInfo.status = false"
                           @keydown.enter.native="situationTypeChange($event, index, item)">
                  <el-option v-for="situationType in situationTypeList" :key="situationType.dictValue"
                             :label="situationType.dictLabel" :value="situationType.dictValue">
                    <div>
                      <el-tag :type="situationType.listClass">
                        {{ situationType.dictLabel }}
                      </el-tag>
                    </div>
                  </el-option>
                </el-select>
              </div>
              <div class="center-div mb5 " style="margin-top: -5px;">
                <span>诊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;断</span>：
                <el-tooltip :content="item.diagnosisStr" class="item" effect="dark" placement="top">
                  <span class="zhen-duan">{{ item.diagnosisStr }}</span>
                </el-tooltip>
              </div>
              <div class="center-div mb5"><span>收费类别</span>：{{
                  dictStore.getMateDictInfo(
                    dictDataMap["medical_insurance_type"],
                    item.chargeType
                  )
                    ? dictStore.getMateDictInfo(
                      dictDataMap["medical_insurance_type"],
                      item.chargeType
                    ).dictLabel
                    : ""
                }}
              </div>
              <div class="center-div mb5"><span>入院时间</span>：<span style="color: #98999B;">{{
                  item.admissionTime
                }}</span></div>
              <div class="center-div mb5"><span>管床医生</span>：
                <span>
                              <el-select v-model="item.doctorInCharge" :disabled="!item.visitId" placeholder="请选择"
                                         :class="'situationType-class' + index"
                                         :style="{
                                          flex: '0.2',
                                          width: '50%',
                                          borderRadius: '5px',
                                          border: item.situationType === '1' ? '1px solid #FF634E' : item.situationType === '2' ? '1px solid #FF882D' : '1px solid #4E64F6'
                                        }"
                                         @change="doctorChange($event, item, '1')"
                                         @click="modelValueInfo.status = false">
                                  <el-option v-for="item in orgVsUserList" :key="item.userId" :label="item.nickName"
                                             :value="item.userId"/>
                              </el-select>
                          </span>
              </div>
              <div class="center-div mb5"><span>上级医生</span>：
                <span>
                              <el-select v-model="item.upperDoctor" :disabled="!item.visitId" placeholder="请选择"
                                         :class="'situationType-class' + index"
                                         :style="{
                                          flex: '0.2',
                                          width: '50%',
                                          borderRadius: '5px',
                                          border: item.situationType === '1' ? '1px solid #FF634E' : item.situationType === '2' ? '1px solid #FF882D' : '1px solid #4E64F6'
                                        }"
                                         @change="doctorChange($event, item, '2')"
                                         @click="modelValueInfo.status = false">
                                  <el-option v-for="item in orgVsUserList" :key="item.userId" :label="item.nickName"
                                             :value="item.userId"/>
                              </el-select>
                          </span>
              </div>
              <div class="center-div mb5"><span>主任医生</span>：
                <span>
                              <el-select v-model="item.directorDoctor" :disabled="!item.visitId" placeholder="请选择"
                                         :class="'situationType-class' + index"
                                         :style="{
                                          flex: '0.2',
                                          width: '50%',
                                          borderRadius: '5px',
                                          border: item.situationType === '1' ? '1px solid #FF634E' : item.situationType === '2' ? '1px solid #FF882D' : '1px solid #4E64F6'
                                        }"
                                         @change="doctorChange($event, item, '3')"
                                         @click="modelValueInfo.status = false">
                                  <el-option v-for="item in orgVsUserList" :key="item.userId" :label="item.nickName"
                                             :value="item.userId"/>
                              </el-select>
                          </span>
              </div>
              <div class="center-div mb5"><span>质控医生</span>：
                <span>
                              <el-select v-model="item.qualityDoctor" :disabled="!item.visitId" placeholder="请选择"
                                         :class="'situationType-class' + index"
                                         :style="{
                                          flex: '0.2',
                                          width: '50%',
                                          borderRadius: '5px',
                                          border: item.situationType === '1' ? '1px solid #FF634E' : item.situationType === '2' ? '1px solid #FF882D' : '1px solid #4E64F6'
                                        }"
                                         @change="doctorChange($event, item, '4')"
                                         @click="modelValueInfo.status = false">
                                  <el-option v-for="item in orgVsUserList" :key="item.userId" :label="item.nickName"
                                             :value="item.userId"/>
                              </el-select>
                          </span>
              </div>
              <template #footer>
                <div class="footer-div" style="background-color: #dadada">
                  <div class="footer-div-info">
                    <div class="footer-div-info-num">
                      {{
                        item.patPrepaymentSum
                          ? item.patPrepaymentSum.toFixed(2) : 0.00
                      }}
                    </div>
                    <div class="footer-div-info-text">
                      预交金(元)
                    </div>
                  </div>
                  <div class="footer-div-info">
                    <div class="footer-div-info-num">
                      {{
                        item.expensesIncurred ?
                          item.expensesIncurred.toFixed(2) :
                          0.00
                      }}
                    </div>
                    <div class="footer-div-info-text">
                      发生费用(元)
                    </div>
                  </div>
                  <div class="footer-div-info">
                    <div class="footer-div-info-num">
                      {{ item.balance ? item.balance.toFixed(2) : 0.00 }}
                    </div>
                    <div class="footer-div-info-text">
                      余额(元)
                    </div>
                  </div>
                  <div class="footer-div-info">
                    <div class="footer-div-info-num">
                      {{
                        item.hospitalizationDays ? item.hospitalizationDays : "无"
                      }}
                    </div>
                    <div class="footer-div-info-text">
                      住院天数
                    </div>
                  </div>
                </div>
              </template>
            </el-card>
          </template>
        </el-space>
      </el-row>
    </div>
    <el-dialog v-model="dialogVisible" title="移入科室" width="60%" @close="handleClose">
      <transfer-to-the-dept-vue ref="transferToTheDeptRef" @transfer-to-the-dept-ok="transferToTheDeptOk"/>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {useDictStoreHook} from "@/store/modules/dict";
import {useUserStoreHook} from "@/store/modules/user";
import {cancelMoveInOk, getBedRecGroup} from "@/api/nurse/bedRec.ts";
import {listBedRecAndPatientDoctor, updatePatVisit} from '@/api/hospitalization/patVisit';
import {getOrgVsUserList} from '@/api/system/user';
import transferToTheDeptVue from './transferToTheDept.vue';
import eventBus from "@/utils/eventBus.ts";

const emits = defineEmits(["cardDblClick"])
const dialogVisible = ref(false)
const {proxy} = getCurrentInstance() as any;
const date = proxy.$parseTime(new Date(), "{y}-{m}-{d} ");
const dateRange = ref([date + "00:00:00", date + "23:59:59"]);
const dictStore = useDictStoreHook();
const useUserStore = useUserStoreHook();
const patientList = ref<any>([])
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
let dictDataMap = ref(dictStore.isTypeGetData('pay_way_dict', 'medical_insurance_type', 'entry_and_exit_hospital_status', 'sys_user_sex',
  'pat_prepayment_type', 'admission_situation_dict', 'disease_dict'
))

const patientIdThis = ref<string>("")
const visitIdThis = ref<string>("")

// 移入科室组件
const transferToTheDeptRef = ref()
const currentSelectDept = ref<string>("")
// 病情字典集合
const situationTypeList = ref<any>([])
// 选中可是下用户list
const orgVsUserList = ref<any>([])
const modelValueInfo = ref<any>({
  status: false,
  x: 0,
  y: 0,
})
const menuSetting = ref({
  status: false,
  x: 0,
  y: 0,
})
const rightMenuList = ref<any>([])
const bedRecGroupInfo = ref<any>({
  count: 0,
  emptyBed: 0,
  notEmptyBed: 0
})


const queryParams = ref<any>({
  inFlag: "1",
  isMyPatient: "0",
  deptStayed: currentSelectDept.value,
  orgId: userInfo.orgId,
  wardFlag: "Y",
  deptFlag: "Y"
})

function handleQuery() {
  getList()
}


function admissionTimeChange(e) {
  dateRange.value = [proxy.$parseTime(e[0], "{y}-{m}-{d} 00:00:00"), proxy.$parseTime(e[1], "{y}-{m}-{d} 23:59:59")]
  handleQuery()
}

function getBedRecGroupFun() {
  if (currentSelectDept.value) {
    getBedRecGroup(currentSelectDept.value, userInfo.orgId).then((res: resType) => {
      const data: any = res.data
      if (data) {
        bedRecGroupInfo.value.count = data.count
        bedRecGroupInfo.value.emptyBed = data.remptyBed
        bedRecGroupInfo.value.notEmptyBed = data.notEmptyBed
      }
    })
  }
}


function getList() {
  if (queryParams.value.inFlag === "1") {
    queryParams.value.wardFlag = "Y"
    queryParams.value.deptFlag = "Y"
  } else if (queryParams.value.inFlag === "2") {
    queryParams.value.wardFlag = "N"
    queryParams.value.deptFlag = "N"
  } else {
    queryParams.value.wardFlag = ""
    queryParams.value.deptFlag = ""
  }
  if (currentSelectDept.value) {
    listBedRecAndPatientDoctor(proxy.$addDateRange(queryParams.value, dateRange.value, "dischargeTime")).then((res: resType) => {
      // let aa = res.data.concat(res.data).concat(res.data).concat(res.data).concat(res.data).concat(res.data).concat(res.data)
      patientList.value = res.data
      patientList.value.forEach((item: any) => {
        let patPrepaymentSumThis = 0 as number
        if (item.patPrepaymentVos) {
          item.patPrepaymentVos.forEach((patPrepayment: any) => {
            patPrepaymentSumThis += Number(patPrepayment.amountOfMoney)
          })
          item.patPrepaymentSum = patPrepaymentSumThis
        }
        item.balance = item.patPrepaymentSum - item.expensesIncurred
        item.expensesIncurred = Number(item.expensesIncurred)
      })
      // patientList.value =  patientList.value.concat(patientList.value).concat(patientList.value).concat(patientList.value).concat(patientList.value)
      //     .concat(patientList.value).concat(patientList.value).concat(patientList.value).concat(patientList.value)
      setTimeout(() => {
        patientList.value.forEach((item, index) => {
          situationTypeOk(item.situationType, index, item)
        })
      });
    })
  }
}


/** 查询病情字典 */
function listSysOrgDictFun() {
  situationTypeList.value = dictDataMap.value['disease_dict']
}

function getOrgVsUserListFun() {
  getOrgVsUserList({deptId: currentSelectDept.value}).then((res: resType) => {
    orgVsUserList.value = res.data
  })
}

/**
 * 关闭右键菜单
 */
function closeRightMenu() {
  modelValueInfo.value.status = false
  modelValueInfo.value.x = 0
  modelValueInfo.value.y = 0
}

/**
 *
 * @param item 患者床位卡单击事件
 * @param index
 */
function cardClick(item: any, index: number) {
  closeRightMenu()
  cardClickOk(item, index)
}

/**
 * 换着床位卡双击事件
 */
function cardDblClick(obj: any, index: number) {
  obj.currentSelectDept = currentSelectDept.value
  emits("cardDblClick", obj, index + 1)
}

function cardClickOk(item: any, index: number) {
  const cardRef = "patientCard-" + index;
  for (let i = 0; i < patientList.value.length; i++) {
    if (index === i) {
      const myDivParent = document.getElementById(cardRef) as HTMLElement;
      myDivParent.style.backgroundColor = "rgb(118 204 237 / 53%)";
    } else {
      const cardRef = "patientCard-" + i;
      const myDivParent = document.getElementById(cardRef) as HTMLElement;
      myDivParent.style.backgroundColor = "#ffffff";
    }
  }

}

function updateModelValue(obj: any) {
  modelValueInfo.value = obj
}

function openMenu(event, item: any, index: number) {
  rightMenuList.value = []
  cardClickOk(item, index)
  visitIdThis.value = item.visitId
  patientIdThis.value = item.patientId
  // 获取鼠标点击的坐标位置
  const x = event.clientX
  const y = event.clientY

  modelValueInfo.value.status = true
  modelValueInfo.value.x = x
  modelValueInfo.value.y = y
  if (!item.visitId) {
    // 空床
    rightMenuList.value = [
      {
        name: '移入病区',
        click: () => {
          transferToTheWard(item)
        }
      }
    ]
  } else {
    rightMenuList.value = [
      {
        name: '撤销入科',
        click: () => {
          cancelMoveIn(item)
        }
      },
      {
        name: '转科',
        click: () => {
          transferDept()
        }
      },
      // {
      //     name: '取消移出',
      //     click: () => {
      //         cancelRemoval(item)
      //     }
      // }
      {
        name: '医嘱信息',
        click: () => {
          ordersInfo(item)
        }
      },
    ]
  }

}

/** 修改护理等级询问 鼠标点击 */
function situationTypeChange(_event, index: number, item: any) {
  situationTypeOk(item.situationType, index, item)
  if (item) {
    updatePatVisit({visitId: item.visitId, situationType: item.situationType}).then(() => {
      ElMessage.success("病情修改成功");
      handleQuery()
    })
  }
}


/**
 * 管床医师、上级医生等修改事件
 */
function doctorChange(event, item, type) {
  let message = "";
  let nurse = <any>{};
  nurse.visitId = item.visitId
  if (item) {
    if (type === "1") {
      nurse.doctorInCharge = event
      message = "管床医生修改成功";
    } else if (type === "2") {
      nurse.upperDoctor = event
      message = "上级医生修改成功";
    } else if (type === "3") {
      nurse.directorDoctor = event
      message = "主任医生修改成功";
    } else if (type === "4") {
      nurse.qualityDoctor = event
      message = "质控医生修改成功";
    }
    updatePatVisit(nurse).then(() => {
      ElMessage.success(message);
      handleQuery()
    })
  }
}

/** 护理等级修改确认 */
function situationTypeOk(event, index: number, item) {
  let style = {
    backColor: "fef0f0",
    color: "ff0000"
  }
  // 获取选中的数据与元数据匹配项
  const situationTypeIndex = situationTypeList.value.findIndex(obj => {
    return obj.dictValue == event
  })
  if (situationTypeIndex > -1) {
    const situationTypeInfo = situationTypeList.value[situationTypeIndex]
    style = proxy.$mateStyle(situationTypeInfo);
    const situationTypeRef = "situationType-class" + index;
    const elements = document.getElementsByClassName(situationTypeRef);
    // 遍历所有获取到的元素
    for (let i = 0; i < elements.length; i++) {
      // 对元素设置背景色
      elements[i].children[0].style.backgroundColor = style.backColor;
      // 对元素设置字体颜色
      if (item.visitId) {
        elements[i].children[0].children[0].children[1].children[0].style.color = style.color;
      } else {
        elements[i].children[0].children[0].children[0].children[0].style.color = style.color;
      }
    }
  }
}

function moveIntoDept() {
  dialogVisible.value = true
  nextTick(() => {
    transferToTheDeptRef.value.openTransferToTheDept()
  })
}


// onUpdated(() => {
//     patientList.value.forEach((item, index) => {
//         situationTypeOk(item.situationType, index, item)
//     })
// })
function handleClose() {
  transferToTheDeptRef.value.empty()
  dialogVisible.value = false
}


/**
 * 撤销入科
 */
function cancelMoveIn(item) {
  ElMessageBox.confirm('确认要进行【撤销入科】操作吗？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 撤销入科
    const data = {
      visitId: visitIdThis.value,
      patientId: patientIdThis.value
    }
    cancelMoveInOk(data).then(() => {
      ElMessage.success("撤销入科成功")
      dialogVisible.value = false
      getList()
    })
  }).catch(() => {
  })
}

/**
 * 患者医嘱操作
 */
function ordersInfo(item) {
  cardDblClick(item, 0)
}

function transferDept() {
  alert("有需求，联系我们再添加功能")
}

/**
 * 取消移出
 */
// function cancelRemoval(item) {
//     alert("取消移出" + item.visitId)
// }

/**
 * 移入病区
 */
function transferToTheWard(item) {
  dialogVisible.value = true
  nextTick(() => {
    transferToTheDeptRef.value.openTransferToTheWard(item)
  })

}

function transferToTheDeptOk() {
  dialogVisible.value = false
  getList()
}

onMounted(() => {
  // 1. 组件挂载时初始化：从 Pinia 状态读取已选中科室（处理路由刷新场景）
  // 如果用户已选择科室（如页面刷新后状态保留），直接加载数据
  if (useUserStore.user.currentSelectDept) {
    // 将全局状态中的科室 ID 同步到本地组件状态
    currentSelectDept.value = useUserStore.user.currentSelectDept
    queryParams.value.deptStayed = currentSelectDept.value
    patientRefresh();
  }
  // 2. 监听科室切换事件（处理用户主动切换科室场景）
  // 通过事件总线监听 Navbar 组件触发的科室切换事件
  eventBus.on('navbarDeptChange', (newDeptId: string) => {

    // 更新本地组件的科室 ID 状态
    currentSelectDept.value = newDeptId;
    queryParams.value.deptStayed = currentSelectDept.value
    patientRefresh();
  });
});
// 组件卸载时移除监听（避免内存泄漏）
onUnmounted(() => {
  eventBus.off('navbarDeptChange');
});


function patientRefresh() {
  getBedRecGroupFun()
  listSysOrgDictFun()
  getOrgVsUserListFun()
  handleQuery()
}


</script>

<style lang="scss" scoped>

.hospital-bad-list {
  display: flex;
  padding: 0;

  .search-container {
    position: relative;
    width: 344px;

    .search-container-primary {
      width: 200px;
      height: 34px;
      background: #4E64F6;
      border-radius: 17px;
      margin-left: -40px;
    }

    .search-container-add {
      position: absolute;
      left: calc(50% - 62px);
      bottom: 10px;
      width: 135px;
      height: 34px;
      background: #4E64F6;
      border-radius: 17px;
      color: #fff;
    }
  }

  .list-container {
    padding: 0 0px 20px 20px;
    overflow: auto;

    .card-header {
      .card-header-name {
        display: inline-block;
        margin-right: 10px;
        font-weight: bold;
        font-size: 14px;
        color: #333338;
        // line-height: 20px;
        text-align: left;
      }

      .card-header-sex {
        display: inline-block;
        margin: 0 10px;
        font-size: 12px;
        color: #98999B;
      }
    }

    .footer-div {
      display: flex;
      justify-content: space-between;

      .footer-div-info {
        text-align: center;

        .footer-div-info-num {
          font-size: 14px;
          color: #333338;
        }

        .footer-div-info-text {
          font-size: 11px;
          color: #98999B;
        }
      }
    }
  }
}

.bed-card {
  border-radius: 8px;
  max-width: 350px;
  min-width: 274px;
  flex: 0.5;
}

.card-div {
  // background-color: #5c6cb4;
  color: #fff;
  padding-left: 10px;
  border-radius: 0px 7px 7px 0px;
}

.div-conter {
  margin-top: -8px;
  height: 27px;
  line-height: 27px;
  font-size: 12px;
}

// 默认患者信息
.bed-card-show {
  background-color: #16b5f6;
  border-radius: 7px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  padding: 0 2px 0 2px
}

:deep(.el-card__header) {
  // height: 26px;
  // margin-top: 20px;
  padding: 15px 8px 0px 8px;
}

.click-div {
  background-color: #76cced;
}

.center-div {
  font-size: 13px;
}

.ping-pu {
  text-align-last: justify;
  width: 89px;
  display: inline-block;
}

.footer-div {
  // background-color: rgb(226 227 227);
  border-radius: 10px;
  padding: 5px 5px 0px 12px;
  margin-top: -15px;
  margin-bottom: -15px;

}

:deep(.el-card__footer) {
  padding: 18px 4px;
}

:deep(.el-card__body) {
  padding: 5px 20px 5px 20px;
}

</style>
